<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../../css/public.css" media="all">
    <style>
        body {
            background-color: #ffffff;
        }
        
        .show_tab {
            margin-top: 100px;
        }
        
        .title_tab {
            text-align: center;
            font-size: 20px;
            font-weight: 300;
        }
    </style>
</head>

<body>
    <div class="layui-container">

        <div class="layui-row">
            <div class="layui-col-md12 show_tab">
                <blockquote class="layui-elem-quote layui-text title_tab">
                    优目系统检查详情
                </blockquote>
                <div class="layui-tab" lay-filter="test">
                    <ul class="layui-tab-title">
                        <li class="layui-this" lay-id="11">远近视力</li>
                        <li lay-id="22">旧镜信息</li>
                        <li lay-id="33">交叉柱结果</li>
                        <li lay-id="44">完全矫正</li>
                        <li lay-id="55">配镜处方</li>
                    </ul>

                    <div class="layui-tab-content">
                        <div class="layui-tab-item layui-show">
                            内容1
                        </div>
                        <div class="layui-tab-item">内容2</div>
                        <div class="layui-tab-item">内容3</div>
                        <div class="layui-tab-item">内容4</div>
                        <div class="layui-tab-item">内容5</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="../../js/layui.js" charset="utf-8"></script>
    <!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->

    <script>
        layui.use('element', function() {
            var $ = layui.jquery,
                element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
            //触发事件
            var active = {
                tabChange: function() {
                    //切换到指定Tab项
                    element.tabChange('demo', '22'); //切换到：用户管理
                }
            };

            $('.site-demo-active').on('click', function() {
                var othis = $(this),
                    type = othis.data('type');
                active[type] ? active[type].call(this, othis) : '';
            });

            //Hash地址的定位
            var layid = location.hash.replace(/^#test=/, '');
            element.tabChange('test', layid);

            element.on('tab(test)', function(elem) {
                location.hash = 'test=' + $(this).attr('lay-id');
            });
        });
    </script>



</body>